<template>
  <div>
    <el-card class="cardTits" shadow="hover">
      <el-row type="flex" class="row-bg" v-if="taskType === ''" justify="space-around">
        <el-col :span="7">
          <div class="billing-item">
            <div class="billing-item-left">
              <div class="status">待确认</div>
              <div class="desc">未确认结算单金额</div>
              <div class="money">{{ priceAll.unConfirmedAmount }}</div>
            </div>
            <div class="billing-item-right bule">
              <el-image
                :src="require('/src/assets/img/icon_weijiesuan.png')"
              ></el-image>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="billing-item">
            <div class="billing-item-left">
              <div class="status">待打款</div>
              <div class="desc">已确认结算单未打款金额</div>
              <div class="money">{{ priceAll.unPaidAmount }}</div>
            </div>
            <div class="billing-item-right orange">
              <el-image
                :src="require('/src/assets/img/icon_jiesuan.png')"
              ></el-image>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="billing-item">
            <div class="billing-item-left">
              <div class="status">已打款</div>
              <div class="desc">已打款结算单金额</div>
              <div class="money">{{ priceAll.paidAmount }}</div>
            </div>
            <div class="billing-item-right violet">
              <el-image
                :src="require('/src/assets/img/icon_dakuan.png')"
              ></el-image>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="subject-title">
        <div class="query query-billinglist">
          <div class="flex-box">
            <div class="query-date">
              <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="～"
                start-placeholder="结算单创建开始时间"
                end-placeholder="结束时间"
              >
              </el-date-picker>
            </div>
            <div class="query-select" v-if="taskType === ''">
              <el-select v-model="selectValue" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <el-button @click="getTableList" class="query-btn" type="primary">查询</el-button>
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        @selectionChange="downloadWhether"
        stripe
        style="width: 100%"
        ref="multipleTable"
        @sort-change="sortChange"
      >
        <el-table-column v-if="taskType == 1" type="selection" width="60">
        </el-table-column>
        <el-table-column v-else width="20"> </el-table-column>
        <el-table-column prop="id" sortable="custom" label="结算单ID" width="100"> </el-table-column>
        <el-table-column prop="amount" sortable="custom" label="服务款总额" width="120">
          <template #default="item">
            {{ formatNumber(item.row.amount) }}
            </template>
        </el-table-column>
        <el-table-column prop="fee" sortable="custom" label="平台服务费" width="120">
          <template #default="item">
            {{ formatNumber(item.row.fee) }}
            </template>
        </el-table-column>
        <el-table-column prop="settlementAmount" sortable="custom" label="结算总金额" width="120">
          <template #default="item">
            {{ formatNumber(item.row.settlementAmount) }}
            </template>
        </el-table-column> 
        <el-table-column prop="enterpriseName" label="平台账户公司名称" width="160"> </el-table-column>
        <el-table-column prop="platformReceiveBank" label="平台收款银行" width="120"> </el-table-column>
        <el-table-column prop="platformReceiveCardNo" label="平台收款账号" width="160"> </el-table-column>
        <el-table-column prop="endTime" sortable="custom" label="结算时间" width="150">
          <template #default="item">
            <template v-if="item.row.endTime == null">--</template>
            <template v-else>{{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.endTime)) }}</template>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" sortable="custom" label="结算单创建时间" width="150">
          <template #default="item">
            {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatuts" align="center" label="状态" width="">
          <template #default="item">
            {{ paymentStatuts[item.row.paymentStatuts] }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          class-name="editor"
          width="200"
        >
        <!-- uploadVoucher -->
          <template #default="item">
            <el-button @click="getBusinessList(item.row.settlementNo)" type="text">明细</el-button>
            <el-button v-if="item.row.paymentStatuts == 2" @click="getPlatformSituation(item.row)" type="text">查看平台打款情况</el-button>
            <el-button v-if="item.row.paymentStatuts == 1"  @click="getBusinessLists(item.row)" type="text">上传打款凭证</el-button>
            <el-button v-if="item.row.paymentStatuts == 0" @click="getUpdateSettlementStatus(item.row.settlementNo, 1)" type="text">确认结算单</el-button>
            <el-button v-if="item.row.paymentStatuts == 1 || item.row.paymentStatuts == 0" @click="getUpdateSettlementStatus(item.row.settlementNo, 3)" type="text">作废</el-button>
            
          </template>
          <!-- <el-button @click="addTaskModule = true" type="text"
            >确认结算单</el-button
          >｜
          |
          <el-button @click="addTaskModule = true" type="text"
            >查看打款凭证</el-button
          >｜ -->
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="tableData.length > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="arrPage"
        :page-size="selectPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!--结算单明细 -->
    <el-dialog
      title="结算单明细"
      custom-class="task-dialog"
      v-model="addTaskModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <div class="title">个体工商户服务款</div>
        <el-table
          :data="businessList"
          stripe
          style="width: 100%"
        >
          <!-- <el-table-column prop="taskId" sortable="custom" label="任务ID" width=""> </el-table-column> -->
          <el-table-column prop="legalName" label="姓名" width="">
          </el-table-column>
          <el-table-column prop="legalIdCard" label="身份证号" width="">
          </el-table-column>
          <el-table-column prop="legalphone" label="手机号" width="">
          </el-table-column>
          <el-table-column prop="bankNo" label="收款卡号" width="180">
          </el-table-column>
          <el-table-column prop="bankName" label="收款银行" width=""></el-table-column>
          <el-table-column prop="subFee" label="实际服务费" width="">
            <template #default="item">
            <template v-if="item.row.subFee == null">--</template>
            <template v-else>{{ formatNumber(item.row.subFee) }}</template>
            </template>
          </el-table-column>
          <el-table-column prop="bankName" label="任务明细" width="" class-name="editor">
            <template #default="item">
              <el-button type="text" @click="getTaskMingxi(item.row)">详情</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="paymentStatuts" label="打款状态" width="">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
              </template>
          </el-table-column>
          <!-- <el-table-column prop="remarks" label="备注" width=""></el-table-column> -->
        </el-table>
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-sizes="arrPage"
          :page-size="selectPage1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
        >
        </el-pagination>
        <div class="add-border" style="margin-top: 30px"></div>
        <div class="title">服务费</div>
        <el-table
          :data="businessMingxi"
          stripe
          style="width: 100%"
          ref="multipleTable"
        >
          <el-table-column prop="id" label="结算单ID" width=""></el-table-column>
          <el-table-column prop="fee" label="平台服务费" width="">
            <template #default="item">
            {{ formatNumber(item.row.fee) }}
            </template>
          </el-table-column>
          <el-table-column prop="platformReceiveBank" label="收款银行" width=""></el-table-column>
          <el-table-column prop="platformReceiveCardNo" label="收款卡号" width=""></el-table-column>
          <el-table-column prop="createTime" sortable="custom" label="结算单创建时间" width="">
            <template #default="item">
              {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="paymentStatuts" label="打款状态" width="">
            <template #default="item">
              {{ paymentStatuts[item.row.paymentStatuts] }}
              </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addTaskModule = false">取 消</el-button>
          <el-button type="primary" @click="addTaskModule = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!--上传打款凭证 -->
    <el-dialog
      title="上传打款凭证"
      custom-class="task-dialog"
      v-model="uploadVoucher"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <div class="title">服务费</div>
        <el-table
          :data="businessLists"
          @selectionChange="downloadWhether"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="结算单ID" width=""> </el-table-column>
          <el-table-column prop="amount" label="服务款总额" width="">
            <template #default="item">
            {{ formatNumber(item.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="fee" label="平台服务费" width="">
            <template #default="item">
            {{ formatNumber(item.row.fee) }}
            </template>
          </el-table-column>
          <el-table-column prop="settlementAmount" label="结算总金额" width="">
            <template #default="item">
            {{ formatNumber(item.row.settlementAmount) }}
            </template>
          </el-table-column>
          <el-table-column prop="endTime" sortable="custom" label="结算时间" width="">
            <template #default="item">
              <template v-if="item.row.endTime == null">--</template>
              <template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.endTime)) }}</template>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" sortable="custom" label="结算单创建时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="add-task">
          <el-form
            :model="taskForm"
            :rules="rules"
            ref="taskForm"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item label="汇款回执单" required>
              <el-upload
                class="upload-demo"
                action=""
                accept="image/png,image/jpeg,application/pdf"
                :multiple="false"
                :limit="1"
                :file-list="fileList"
                :before-remove="file => beforeRemove('huizhiUrl')"
                :http-request="file => handleChange(file, 'huizhiUrl')"
              >
                <el-button size="small" plain>点击上传汇款回执单</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="汇款明细">
              <el-upload
                class="upload-demo"
                action=""
                accept="image/png,image/jpeg,application/pdf"
                :multiple="false"
                :limit="1"
                :before-remove="file => beforeRemove('mingxiUrl')"
                :file-list="fileList"
                :http-request="file => handleChange(file, 'mingxiUrl')">
                <el-button size="small" plain>点击上传汇款明细</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="uploadVoucher = false">取 消</el-button>
          <el-button type="primary" @click="uploadFileJiesuan"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!--关联任务明细 -->
    <el-dialog
      title="关联任务明细"
      custom-class="task-dialog"
      v-model="guanlianTaskModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <el-table
          :data="guanlianTaskList"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="taskId" sortable="custom" label="任务ID" width="80"> </el-table-column>
          <el-table-column prop="name" label="任务名称" min-width="120">
          </el-table-column>
          <el-table-column prop="taskPayment" sortable="custom" label="预计服务费" width="110">
            <template #default="item">
              {{ formatNumber(item.row.taskPayment) }}
            </template>
          </el-table-column>
          <el-table-column prop="legalName" sortable="custom" label="任务接收人" width="110">
          </el-table-column>
          <el-table-column prop="legalPhone" sortable="custom" label="任务接收人手机号" min-width="150">
          </el-table-column>
          <el-table-column prop="bonus" sortable="custom" label="奖励" width="90">
            <template #default="item">
              {{ formatNumber(item.row.bonus) }}
            </template>
          </el-table-column>
          <el-table-column prop="fine" sortable="custom" label="处罚" width="90">
            <template #default="item">
              {{ formatNumber(item.row.fine) }}
            </template>
          </el-table-column>
          <el-table-column prop="shoudPayment" sortable="custom" label="实际服务费" width="110">
            <template #default="item">
              {{ formatNumber(item.row.shoudPayment) }}
            </template>
          </el-table-column>
          <el-table-column prop="releaseDate" sortable="custom" label="任务开始时间" width="150">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.releaseDate)) }}
            </template>
          </el-table-column>
          <el-table-column prop="endDate" sortable="custom" label="任务结束时间" width="150">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.endDate)) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="guanlianTaskModule = false">取 消</el-button>
          <el-button type="primary" @click="guanlianTaskModule = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!--平台打款情况 -->
    <el-dialog
      title="平台打款情况"
      custom-class="task-dialog"
      v-model="platformSituation"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <div class="title">平台打款情况</div>
        <el-table
          :data="platformSituations"
          @selectionChange="downloadWhether"
          stripe
          style="width: 100%"
          ref="multipleTable"
        >
          <el-table-column
            prop="businessPayTime"
            label="企业打款时间"
            width=""
             sortable="custom"
          >
             <template #default="item">
              <template v-if="item.row.businessPayTime == null">--</template>
              <template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.businessPayTime)) }}</template>
             </template>
          </el-table-column>
          <el-table-column
            prop="platformPaymetStatus"
            label="平台打款状态"
            width=""
          >
          <template #default="item">
            {{ platformPaymetStatus[item.row.platformPaymetStatus] }}
          </template>
          </el-table-column>
          <el-table-column
            prop="platformPayTime"
            label="平台打款时间"
             sortable="custom"
            width=""
          >
          <template #default="item">
            <template v-if="item.row.platformPayTime == null">--</template>
            <template v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.platformPayTime)) }}</template>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformPaymentReceiptUrl"
            label="平台打款凭证"
            width=""
             class-name="editor"
          >
          <template #default="item">
            <template v-if="item.row.platformPaymentReceiptUrl == null">--</template>
            <el-button v-else type="text" @click="openUrl(item.row.platformPaymentReceiptUrl)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformPaymentDetailUrl"
            label="平台打款明细"
            width=""
             class-name="editor"
          >
          <template #default="item" class-name="editor">
            <template v-if="item.row.platformPaymentDetailUrl == null">--</template>
            <el-button v-else type="text" @click="openUrl(item.row.platformPaymentDetailUrl)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="platformSituation = false">取 消</el-button>
          <el-button type="primary" @click="platformSituation = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { ElLoading } from 'element-plus'
export default {
  name: "AcceptanceTaskTable",
  props: ["taskType"],
  data() {
    return {
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      mubanflag: false,
      guanlianTaskList: [],
      guanlianTaskModule: false, // 关联任务明细
      paymentStatuts: {
        1: "未打款",
        0: "未结算",
        2: "已打款",
        3: "废弃",
        4: "验证中",
      },
      platformPaymetStatus: {
        0: "未打款",
        1: "已打款",
      },
      businessLists: [],
      searchVal: "", // 查询条件
      total: 1, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      currentPage: 1,
      date: [],
      checkNo: '',
      selectValue: "",
      addTaskModule: false,
      uploadVoucher: false,
      platformSituation: false,
      platformSituations: [],
      tableData: [],
      businessList: [],// 结算单明细 个体工商户服务款
      serviceArr: [], 
      paymentStatutsList: [2,4],
      total1: 1, // 总条数
      selectPage1: 10, // 每页选中条数
      currentPage1: 1,
      fileList: [],
      fileUrl: {
        huizhiUrl: '',
        mingxiUrl: ''
      },
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "未结算",
        },
        {
          value: "1",
          label: "未打款",
        },
        {
          value: "2",
          label: "已打款",
        },
        {
          value: "3",
          label: "已作废",
        },
      ],
      priceAll: {
        paidAmount: 0, // 已打款金额
        unConfirmedAmount: 0, // 待确认金额/未结算金额
        unPaidAmount: 0 // 已确认结算单未打款金额
      },
      businessMingxi: [],
      settlementNo1: null
    };
  },
  components: {},
  mounted() {
    if(this.taskType === '') {
      this.getPrice()
    }
    this.getTableList()
  },
  watch: {
    $route(d){
      if(d.name == "Billing") {
        if(this.taskType === '') {
          this.getPrice()
        }
        this.getTableList()
      }
    }
  },
  methods: {
    handleAvatarSuccess( file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG和PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    downloadWhether(d) {
      // 表格复选 选择回调
      console.log(d);
    },
    handleCurrentChange(d) {
      // 分页切换回调
      this.currentPage = d
      this.getTableList()
    },
    handleSizeChange(d) {
      // 分页切换每页条数回调
      this.selectPage = d
      this.getTableList()
    },
    handleCurrentChange1(d) {
      // 分页切换回调
      this.currentPage1 = d
      this.getBusinessList(this.settlementNo1)
    },
    handleSizeChange1(d) {
      // 分页切换每页条数回调
      this.selectPage1 = d
      this.getBusinessList(this.settlementNo1)
    },
    openUrl(url) {
      if(url === '' || url === null || url === undefined) return
      let str = url.substring(0, url.indexOf('?'))
      let suffix = str.substring(str.lastIndexOf('.'), url.length)
      if(suffix === '.PDF' || suffix === '.pdf') {
        window.open(url)
      }else {
        let newwin = window.open();
        newwin.document.write("<img src=" + url + " />");
      }
    },
    getTaskMingxi(item) {
      // 获取关联任务明细
      this.guanlianTaskModule = true;
      this.addTaskModule = false;
      this.$http({
        url: "/api/quick/finance/manage/selectTaskListByNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          selfBusinessId: item.selfBusinessId,
          settlementNo: item.settlementNo,
          pageNum: 1,
          pageSize: 100,
        }
      }).then((data) => {
        if (data.code === 0) {
          this.guanlianTaskList = data.result.list;
        }
      });
    },
    getPrice() {
      // 获取价格信息
      this.$http({
        url: "/api/quick/finance/manage/queryAmountByStatus",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code == 0) {
          this.priceAll = data.result
        }
      });
    },
    getBusinessList(settlementNo) {
        this.settlementNo1 = settlementNo
      // 获取个体工商户服务款
        this.addTaskModule = true;
        this.businessList = [];
        this.total1 = 0
        this.businessMingxi = []
        this.$http({
          url: "/api/quick/finance/manage/querySettleSeverFeeBySettleNo",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            settlementNo: settlementNo,
            pageNum: this.currentPage1,
            pageSize: this.selectPage1,
          }
        }).then((data) => {
          if (data.code === 0) {
            this.businessList = data.result.list;
            this.total1 = data.result.total;
            this.getBusinessMingx(settlementNo)
          }
      });
    },
    getBusinessMingx(settlementNo) {
      // 获取明细内服务费信息
        this.$http({
          url: "/api/quick/finance/manage/querySettleByParam",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            settlementNo: settlementNo,
            pageNum: 1,
            pageSize: 100,
            orderByAsc: this.orderByAsc, // 是否正序
            orderByColume: this.orderByColume, // 排序字段
            orderByZH: this.orderByZH, // 是否汉字
          }
        }).then((data) => {
          if (data.code === 0) {
            this.businessMingxi = [data.result];
        }
      });
    },
    getUpdateSettlementStatus(settlementNo, status){
      // 结算单作废 确认结算单
      this.$http({
        url: "/api/quick/finance/manage/updateSettlementStatus",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          settlementNo: settlementNo,
          settlementStatus: 1,
          paymentStatuts: status
        }
      }).then(d => {
        if(d.code == 0) {
          if(status == 3) {
            this.$message({
              message: '作废成功',
              type: 'success'
            });
          }else {
            this.$message({
              message: '结算单已确认',
              type: 'success'
            });
          }
          this.getPrice()
          this.getTableList()
        }
      })
      .catch(() => {
        this.$message({
          message: '作废失败',
          type: 'success'
        });
      });
    },
    getPlatformSituation(item) {
      this.platformSituation = true;
      // 查看上传打款凭证信息
        this.$http({
          url: "/api/quick/finance/manage/querySettleListByStatus",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            businessId: JSON.parse(localStorage.getItem("bussines_info")).businessId,
            settlementNo: item.settlementNo,
            pageNum: 1,
            pageSize: 100,
            orderByAsc: this.orderByAsc, // 是否正序
            orderByColume: this.orderByColume, // 排序字段
            orderByZH: this.orderByZH, // 是否汉字
          },
        }).then((data) => {
          if (data.code === 0) {
            this.platformSituations = data.result.list
          }
        });
    },
    getBusinessLists(item) {
      this.uploadVoucher = true;
      // 再次打开清楚平台打款情况
      this.fileList = []
      this.fileUrl = {
        huizhiUrl: '',
        mingxiUrl: ''
      }
      // 上传打款凭证信息
        this.$http({
          url: "/api/quick/finance/manage/querySettleListByStatus",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            businessId: JSON.parse(localStorage.getItem("bussines_info")).businessId,
            settlementNo: item.settlementNo,
            pageNum: 1,
            pageSize: 100,
            orderByAsc: this.orderByAsc, // 是否正序
            orderByColume: this.orderByColume, // 排序字段
            orderByZH: this.orderByZH, // 是否汉字
          },
        }).then((data) => {
          if (data.code === 0) {
            this.checkNo = item
            this.businessLists = data.result.list
          }
        });
    },
    getTableList() {
      // 获取结算列表信息
      let status = this.taskType
      if(this.taskType === '') {
        status = this.selectValue
      }
      let start = "",
          end = ""
      if(this.date != "" && this.date != null) {
        start = this.date[0]
        end = this.date[1]
      }
      if(status == 2){
        this.$http({
          url: "/api/quick/finance/manage/querySettleListByStatus",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            businessId: JSON.parse(localStorage.getItem("bussines_info")).businessId,
            paymentStatutsList: this.paymentStatutsList,
            startTime: start,
            endTime: end,
            mixedStr: this.searchVal,
            pageNum: this.currentPage,
            pageSize: this.selectPage,
            orderByAsc: this.orderByAsc, // 是否正序
            orderByColume: this.orderByColume, // 排序字段
            orderByZH: this.orderByZH, // 是否汉字
          },
        }).then((data) => {
          if (data.code == 0) {
            this.tableData = data.result.list
            this.total = data.result.total
          }
        });
      }else {
        this.$http({
          url: "/api/quick/finance/manage/querySettleListByStatus",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            businessId: JSON.parse(localStorage.getItem("bussines_info")).businessId,
            paymentStatuts: status, // 打款状态
            startTime: start,
            endTime: end,
            mixedStr: this.searchVal,
            pageNum: this.currentPage,
            pageSize: this.selectPage,
            orderByAsc: this.orderByAsc, // 是否正序
            orderByColume: this.orderByColume, // 排序字段
            orderByZH: this.orderByZH, // 是否汉字
          },
        }).then((data) => {
          if (data.code == 0) {
            this.tableData = data.result.list
            this.total = data.result.total
          }
        });
      }
      
    },
    handleChange(param,name) {
      // 上传
			const form = new FormData()
      // 文件对象
      form.append('file', param.file)
      let loadingAlert = ElLoading.service({
          lock: true,
          text: '上传中...',
          customClass: 'custom-loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.1)'
      })
			axios({
        method: "POST",
        url: "/api/quick/oss/uploadBySingle",
				headers: {
          "content-type": "multipart/form-data",
          "Authorization": localStorage.getItem("bussines_token")
        },
        data: form
     }).then(data => {
        if(data.data.code == 0) {
          this.fileUrl[name] = data.data.result
        }else {
          this.$message.error("上传失败")
        }
        loadingAlert.close()
      })
    },
    uploadFileJiesuan() {
      // 上传凭证
      // if(this.fileUrl.mingxiUrl == '') {
      //   this.$message.error('请上传汇款明细')
      //   return false
      // }
      if(this.fileUrl.huizhiUrl == '') {
        this.$message.error('请上传汇款回执单')
        return false
      }
      this.$http({
        url: "/api/quick/finance/manage/updateSettlementStatus",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          paymentDetailUrl: this.fileUrl.mingxiUrl,
          paymentReceiptUrl: this.fileUrl.huizhiUrl,
          settlementNo: this.checkNo.settlementNo,
          businessUploadPayCert: 1
        },
      }).then((data) => {
        if (data.code === 0) {
          this.uploadVoucher = false
          this.$message.success("上传成功")
          this.getTableList()
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableList()
    },
    sortChange1(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "legalName" || d.prop == 'bankName') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getBusinessList()
    },
    sortChange2(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "platformReceiveBank") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getBusinessMingx()
    },
    sortChange3(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getBusinessLists()
    },
    sortChange4(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "legalName" || d.prop == 'name') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTaskMingxi()
    },
    sortChange5(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getPlatformSituation()
    },
    beforeRemove(name) {
      this.fileUrl[name] = ''
    }
  },
};
</script>
<style lang="scss" scoped>
.billing-item {
  margin-top: 30px;
  height: 120px;
  background: #ffffff;
  box-shadow: 0px 2px 24px 0px rgba(238, 244, 251, 0.9);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  .billing-item-left {
    .status {
      font-size: 14px;
      font-weight: 500;
      color: #0a2e6a;
      line-height: 20px;
    }
    .desc {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6c8198;
      line-height: 17px;
      margin-top: 2px;
    }
    .money {
      font-size: 18px;
      font-family: DIN-Bold, DIN;
      font-weight: bold;
      color: #0a2e6a;
      margin-top: 14px;
      line-height: 18px;
    }
  }
  .billing-item-right {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .billing-item-right.bule {
    background-color: #e6f1ff;
  }
  .billing-item-right.orange {
    background-color: #fef3ef;
  }
  .billing-item-right.violet {
    background-color: #f1ebfb;
  }
}
.task-dialog {
  .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 0px;
    .add-border {
      height: 1px;
      margin-bottom: 30px;
      background-color: #eef4fb;
    }
  }
  .title {
    color: #0a2e6a;
    line-height: 14px;
    padding-left: 12px;
    font-size: 14px;
    border-left: 3px solid #326cf0;
    margin-bottom: 15px;
    margin-left: 15px;
  }
}
.query-billinglist {
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  .flex-box {
    display: flex;
  }
  .task-add {
    margin-right: 20px;
    & :deep(span),
    & :deep(i) {
      color: #ffffff;
    }
  }
  .query-date {
    height: 32px;
    margin-right: 10px;
    & :deep(.el-input__inner) {
      height: 32px;
      border-color: #eff4fa;
      .el-range-input {
        font-size: 12px;
      }
      .el-range__icon,
      .el-range-separator {
        line-height: 24px;
      }
    }
  }
}
.add-task {
  padding-right: 50px;
  margin-top: 26px;
  & :deep(.el-form-item) {
    .el-date-editor--date {
      .el-input__inner {
        padding: 0 30px;
      }
    }
  }
  & :deep(.el-upload--text) {
    width: auto;
    height: auto;
    border: 0;
    display: block;
    text-align: left;
  }
  & :deep(.el-button--small) {
    color: #326cf0;
    border-color: #326cf0;
  }
  & :deep(.upload-demo) {
    display: flex;
    .el-upload-list {
      margin-left: 20px;
    }
  }
}
.cardTits {
  & :deep(.el-card) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 0;
  }
}
</style>